<template>
    <div>
      <!-- 上传按钮，点击时触发文件选择和上传 -->
  <button  @click="handleUpload">选择并上传文件</button>
      <!-- 隐藏的文件输入元素 -->
      <input
        type="file"
        ref="fileInput"
        style="display: none"
        @change="handleFileChange"
      />
  
      <!-- 显示选中的文件名 -->
      <p v-if="fileName">选中文件: {{ fileName }}</p>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import axios from 'axios'; // 引入axios用于文件上传
  
  // 定义响应式数据
  const fileInput = ref(null);
  const selectedFile = ref(null);
  const fileName = ref(null);
  

    // 上传文件的方法
    const handleUpload = () => {
    // 触发文件输入
    fileInput.value.click();
  };
  
  // 处理文件选择
  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      selectedFile.value = file;
      fileName.value = file.name;
      uploadFile(); // 文件选择后立即上传
    }
  };
  

  // 文件上传逻辑
  const uploadFile = () => {
    if (!selectedFile.value) {
      alert('请先选择一个文件');
      return;
    }
  
    // 创建FormData对象
    const formData = new FormData();
    formData.append('file', selectedFile.value);
    
    // 获取认证Token
    const getAuthToken = () => {
      return localStorage.getItem('token');
    };
  
    // 使用axios发送POST请求
    axios.post('你的上传接口URL', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Authorization': `Bearer ${getAuthToken()}`
      }
    })
    .then(response => {
      // 上传成功的处理
      console.log('文件上传成功', response);
      alert('文件上传成功');
    })
    .catch(error => {
      // 上传失败的处理
      console.error('文件上传失败', error);
      alert('文件上传失败');
    });
  };
  </script>
  
  <style>
  /* 样式根据需要添加 */
  </style>